<template>
  <div class="min-h-screen bg-white font-sans text-sm text-gray-800">
    <div class="mx-auto px-6" style="min-width: 1000px; padding: 0 80px">
      <div class="mb-4 flex h-[600px] flex-col rounded-lg bg-white">
        <div class="flex items-center justify-between  p-4">
          <div class="flex items-center space-x-6">
            <h2 class="text-lg font-semibold">客户消息</h2>
            <div class="flex space-x-1 rounded-full bg-gray-100 p-1 text-sm text-gray-500 cursor-pointer select-none">
              <button @click="msg_tab_idx=0" :class="{
                'bg-white': msg_tab_idx === 0,
                'text-gray-900': msg_tab_idx === 0,
              }" class="rounded-full px-3 py-1 cursor-pointer transition">未读
              </button>
              <button @click="msg_tab_idx=1" :class="{
                'bg-white': msg_tab_idx === 1,
                'text-gray-900': msg_tab_idx === 1,
              }" class="rounded-full px-3 py-1 cursor-pointer transition">已回复
              </button>
              <button @click="msg_tab_idx=2" :class="{
                'bg-white': msg_tab_idx === 2,
                'text-gray-900': msg_tab_idx === 2,
              }" class="rounded-full px-3 py-1 cursor-pointer transition">全部
              </button>
            </div>
          </div>
          <button
              class="rounded-md border border-slate-300 px-3 py-1.5 text-sm font-medium flex items-center cursor-pointer select-none transition hover:opacity-70">
            <img src="../../assets/img/operate/translate.svg" class="w-5 h-5 mr-1" alt="">
            一键翻译
          </button>
        </div>

        <div class="flex min-h-0 flex-1 p-4 rounded-xl" style="box-shadow: 3px 3px 20px rgba(0,0,0,7.5%)">
          <div class="w-1/4 border-r border-slate-200">
            <div class="flex h-full flex-col">
              <div class="flex-1 overflow-y-auto">
                <!-- 修改部分：使用 service_dialog 数据渲染消息列表 -->
                <div v-for="(dialog, index) in service_dialog" :key="dialog.id"
                     :class="['cursor-pointer border-l-4 p-4', selected_dialog === index ? 'border-red-500 bg-red-50' : 'border-transparent hover:bg-slate-50']"
                     @click="selected_dialog = index">
                  <div class="flex items-center justify-between">
                    <span class="text-xs text-gray-500">{{ dialog.id }}号会话</span>
                  </div>
                  <p class="mt-1 truncate text-gray-800">{{ dialog.title }}</p>
                </div>
              </div>
            </div>
          </div>

          <div class="flex w-3/4 flex-col bg-white">
            <div ref="dialogContainer" class="flex-1 space-y-6 overflow-y-auto p-6 pt-2">
              <!-- 修改部分：根据选中的对话渲染聊天内容 -->
              <div v-if="service_dialog[selected_dialog]">
                <div v-for="(message, index) in service_dialog[selected_dialog].dialogue" :key="index"
                     :class="message.role === '客服' ? 'flex flex-col items-end space-y-2' : 'flex justify-start'"
                     class="my-3">
                  <div v-if="message.role === '客服'"
                       class="flex w-full max-w-lg cursor-pointer flex-col items-end rounded-lg border border-gray-200 bg-white p-3 hover:border-blue-500">
                    <div class="flex w-full justify-between text-xs">
                      <span class="font-semibold text-green-600">客服</span>
                      <span class="text-gray-400"></span>
                    </div>
                    <p class="mt-1 w-full text-left">{{ message.text }}</p>
                  </div>
                  <div v-else class="max-w-md rounded-lg bg-gray-100 p-3">
                    <p>{{ message.text }}</p>
                  </div>
                </div>
              </div>
            </div>

            <div class="bg-white p-4">
              <div class="relative">
                <input type="text" placeholder="编辑回复"
                       class="w-full rounded-full border border-slate-300 bg-white py-4 pl-5 pr-24 focus:outline-none focus:ring-2 focus:ring-blue-500">
                <div class="absolute inset-y-0 right-2 flex items-center">
                  <button class="mr-4">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-gray-400" fill="none"
                         viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                      <path stroke-linecap="round" stroke-linejoin="round"
                            d="M12 9v3m0 0v3m0-3h3m-3 0H9m12 0a9 9 0 11-18 0 9 9 0 0118 0z"/>
                    </svg>
                  </button>
                  <button
                      class="rounded-full cursor-pointer select-none hover:bg-blue-700 transition bg-blue-600 px-6 py-2 mr-0.5 text-white">
                    发送
                  </button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>


      <h2 class="text-lg font-semibold mt-8">AI知识库</h2>

      <div class="flex items-center space-x-1 mt-1">
        <button>
          <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-gray-400" fill="none" viewBox="0 0 24 24"
               stroke="currentColor" stroke-width="2">
            <path stroke-linecap="round" stroke-linejoin="round"
                  d="M8.228 9c.549-1.165 2.03-2 3.772-2 2.21 0 4 1.343 4 3 0 1.4-1.278 2.575-3.006 2.907-.542.104-.994.54-.994 1.093m0 3h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
          </svg>
        </button>
        <span class="text-sm text-gray-400">通过引入大模型RAG，来增强客服问答的效率和准确性</span>
      </div>

      <div class="mt-4 mb-6 rounded-xl bg-white p-6 pt-5" style="box-shadow: 3px 3px 20px rgba(0,0,0,7.5%)">
        <div class="">
          <div class="grid grid-cols-4 gap-x-8 border-b border-slate-200 pb-2 text-base text-gray-500">
            <div class="col-span-2">文件名</div>
            <div>文件类型</div>
            <div>操作</div>
          </div>
          <div v-for="(file, index) in files" :key="index"
               class="grid grid-cols-4 gap-x-8 items-center border-b border-slate-200 py-3">
            <div class="font-medium col-span-2">{{ file.name }}</div>
            <div>
              <span class="rounded-md border border-gray-300 px-2 py-0.5 text-xs font-semibold"
                    :class="file.type === 'PDF' ? 'bg-red-50 text-red-600 border-red-200' : 'bg-blue-50 text-blue-600 border-blue-200'">{{
                  file.type
                }}</span>
            </div>
            <div class="flex items-center space-x-4">
              <button
                  class="relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none bg-blue-600">
                <span
                    class="pointer-events-none inline-block h-5 w-5 translate-x-5 transform rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out"></span>
              </button>
              <button class="group relative">
                <svg width="26" height="27" viewBox="0 0 26 27" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <g clip-path="url(#clip0_114_1075)">
                    <path
                        d="M8.0275 9.37695L13 14.3386L17.9725 9.37695L19.5 10.9045L13 17.4045L6.5 10.9045L8.0275 9.37695Z"
                        fill="#445259"/>
                  </g>
                  <defs>
                    <clipPath id="clip0_114_1075">
                      <rect width="26" height="26" fill="white" transform="translate(0 0.071106)"/>
                    </clipPath>
                  </defs>
                </svg>

                <div
                    class="absolute right-0 z-10 mt-2 w-28  origin-top-right rounded-md bg-white py-1 shadow-lg ring-1 ring-gray-200 ring-opacity-5 opacity-0 group-hover:opacity-100 transition-opacity">
                  <a href="#" class="block px-4 py-2 text-sm text-gray-700">解析文档</a>
                  <a href="#" class="block px-4 py-2 text-sm text-gray-700">删除文档</a>
                  <a href="#" class="block px-4 py-2 text-sm text-gray-700">下载到本地</a>
                </div>
              </button>
            </div>
          </div>
        </div>
        <div class="flex justify-center items-center mt-3">
          <button
              class="cursor-pointer mt-4 rounded-full border  text-blue-600 bg-blue-50 px-6 py-3 font-medium  flex items-center">
            <img src="../../assets/img/operate/upload.svg" alt=""> 上传文档
          </button>
        </div>
      </div>


      <h2 class="text-lg font-semibold mt-8">差评检测</h2>

      <div class="mt-4 mb-20 rounded-xl bg-white p-6 pt-5" style="box-shadow: 3px 3px 20px rgba(0,0,0,7.5%)">
        <div class="mt-1 grid grid-cols-3 gap-6">
          <div class="space-y-3">
            <div v-for="(issue, index) in negative_comments" :key="index"
                 class="bg-gray-100 rounded-lg p-3 border cursor-pointer transition"
                 @click="negative_comment_idx = index" :class="{
              'border-red-500': negative_comment_idx === index,
              'border-white': negative_comment_idx !== index,
              'bg-white': negative_comment_idx === index,
            }">
              <div class="flex items-center justify-between">
            <span class="rounded-full bg-red-100 px-2 py-0.5 text-xs font-semibold text-red-700">{{
                issue.item_type
              }}</span>
                <span class="text-xs text-gray-500">10:25</span>
              </div>
              <p class="mt-2 text-gray-600">{{ issue.item_desc }}</p>
            </div>
          </div>
          <div class="rounded-lg border border-slate-200 p-4 col-span-2" v-if="currentNegativeComment">
            <h4 class="font-semibold">售后方案推荐</h4>
            <div class="mt-3 space-y-2 text-gray-600">
              <p v-for="(solution, idx) in currentNegativeComment.solution.split(',')" :key="idx"
                 class="rounded-md px-3">{{ solution.trim() }}</p>
            </div>
            <h4 class="mt-4 font-semibold">话术模板</h4>
            <div class="mt-3 rounded-lg bg-yellow-100 border border-yellow-700 p-4 text-gray-600">
              <p>{{ currentNegativeComment.solution_template }}</p>

              <div class="mt-4 flex items-center">
                <div v-if="is_copied">
                  <svg t="1756290267617" class="icon" viewBox="0 0 1024 1024" version="1.1"
                       xmlns="http://www.w3.org/2000/svg" p-id="1951" width="18" height="18">
                    <path d="M928 274.9L374.7 828.2l-79-79L849 195.8l79 79.1z" p-id="1952" fill="#6c4018"></path>
                    <path d="M374.7 828.2L98 551.5l79-79 276.7 276.7-79 79z" p-id="1953" fill="#6c4018"></path>
                  </svg>
                </div>
                <label for="copy-script"
                       class="text-sm text-yellow-900 font-bold cursor-pointer select-none"
                       @click="copyToClipboard(currentNegativeComment.solution_template)">{{
                    is_copied ? '已复制' : '复制话术'
                  }}</label>
              </div>
            </div>
          </div>
        </div>
      </div>

    </div>
  </div>
</template>

<script setup>
import {computed, ref} from 'vue';

const is_copied = ref(false)
const selected_dialog = ref(0) // 添加选中对话的索引

const copyToClipboard = async (text) => {
  try {
    await navigator.clipboard.writeText(text);
    showCopySuccess();
  } catch (err) {
    // 降级到传统方法
    const textArea = document.createElement('textarea');
    textArea.value = text;
    document.body.appendChild(textArea);
    textArea.select();
    try {
      document.execCommand('copy');
      showCopySuccess();
    } catch (err) {
      console.error('复制失败:', err);
      alert('复制失败，请手动选择文本复制');
    }
    document.body.removeChild(textArea);
  }
};

const showCopySuccess = () => {
  is_copied.value = true;
  setTimeout(() => {
    is_copied.value = false;
  }, 1500)
};

// 添加获取客户名称的函数
const getCustomerName = (dialog) => {
  // 查找第一个用户角色的消息，获取发送者姓名
  const userMessage = dialog.dialogue.find(msg => msg.role === '用户');
  if (userMessage) {
    // 简单从文本中提取可能的姓名（这里可以根据实际需求优化）
    const text = userMessage.text;
    if (text.includes('张先生')) return '张先生';
    if (text.includes('用户')) return '用户';
  }
  return '客户'; // 默认名称
};

const negative_comment_idx = ref(0)

const msg_tab_idx = ref(0)

const messages = ref([
  {sender: '张先生', time: '10:25', text: '商品发货时可以提前吗？我急需使用...', active: true},
  {sender: '张先生', time: '10:25', text: '商品发货时可以提前吗？我急需使用...', active: false},
  {sender: '张先生', time: '10:25', text: '商品发货时可以提前吗？我急需使用...', active: false},
]);

const files = ref([
  {name: '**空气炸锅使用说明书', type: 'PDF'},
  {name: '**空气炸锅使用说明书', type: 'WORD'},
]);

const issues = ref([
  {title: '商品存在质量问题', time: '10:25', description: '该空气炸锅有问题，无法正常加热...'},
  {title: '商品存在质量问题', time: '10:25', description: '该空气炸锅无法通电，强行通电会使得电路短路跳闸...'},
]);

const recommendations = ref([
  '提供退货换货服务',
  '承担退货运费',
  '赠送优惠卷补偿',
]);

const currentNegativeComment = computed(() => {
  return negative_comments[negative_comment_idx.value];
});

const service_dialog = [
  {
    "id": 1,
    "title": "快递查询",
    "dialogue": [
      {
        "role": "客服",
        "text": "Hello! I'm happy to assist you. May I ask what issue you're experiencing with the product or what need you have that I can help with?\n您好！很高兴为您服务，请问您在使用产品过程中遇到什么问题，或者有什么需求可以帮您解答吗？"
      },
      {
        "role": "用户",
        "text": "The clothes I ordered yesterday haven't shown any logistics updates today. When will they be shipped?\n我昨天下单买的衣服，今天看物流一直没更新，想问问什么时候能发货呀？"
      },
      {
        "role": "客服",
        "text": "Please provide your order number or the phone number used during ordering, and I'll check the logistics progress and shipping status for you~\n麻烦您提供一下订单号或下单时的手机号，我帮您查下物流进度和发货情况~"
      },
      {
        "role": "用户",
        "text": "The order number is 123456789, and the phone number is 138XXXX1234.\n订单号是123456789，手机号138XXXX1234。"
      },
      {
        "role": "客服",
        "text": "Okay, I see that your order was picked from the warehouse yesterday. Due to a temporary sorting adjustment at the regional express网点 this morning, the logistics information update is slightly delayed. The package is expected to be shipped by 18:00 today, and the logistics information will be updated accordingly. Please keep an eye on it.\n好的，我这边查到您的订单昨天已完成仓库拣货，因今日早间区域快递网点临时分拣调整，物流信息更新稍有延迟，预计今天18点前会完成打包发货，届时物流信息会同步更新，您可以留意一下。"
      },
      {
        "role": "用户",
        "text": "Alright, I'll wait a bit longer. Also, if the clothes don't fit, can I return or exchange them?\n好的，那我再等等。另外想问下，衣服如果尺码不合适，能退换吗？"
      },
      {
        "role": "客服",
        "text": "Yes, certainly~ Our products support return or exchange within 7 days after receipt without any reason required. As long as the clothes do not affect secondary sales (not washed and tags not removed), you can apply for return or exchange on the order page, and a specialist will assist with the process. We also cover the return shipping costs.\n可以的~咱们商品支持收货后7天内无理由退换，只要衣服不影响二次销售（未水洗、吊牌未拆），您在订单页面申请退换即可，后续会有专员协助处理，退换运费咱们也会承担哦。"
      },
      {"role": "用户", "text": "No problem then, thank you!\n没问题了，谢谢！"},
      {
        "role": "客服",
        "text": "You're welcome~ If you have any other questions later, feel free to contact me. Wishing you a pleasant life!\n不客气~如果后续还有其他问题，随时联系我就好，祝您生活愉快！"
      }
    ]
  },
  {
    "id": 2,
    "title": "产品性能咨询",
    "dialogue": [
      {
        "role": "客服",
        "text": "Hello! Welcome to consult about our air fryer. May I ask if you want to learn about its specific performance or have other usage-related questions?\n您好！欢迎咨询咱们家空气炸锅，请问您是想了解它的具体性能，还是有其他使用相关的疑问呀？"
      },
      {
        "role": "用户",
        "text": "I want to ask if this air fryer heats up quickly? How long does it usually take to fry chicken wings?\n我想问问这款空气炸锅加热快不快？平时炸个鸡翅大概要多久呀？"
      },
      {
        "role": "客服",
        "text": "Our air fryer uses 360° hot air circulation technology, which heats up about 20% faster than ordinary models~ For the chicken wings you mentioned, if they're frozen wings, after thawing and setting at 180℃, it takes about 20-25 minutes; fresh wings take 15-20 minutes, flipping once in the middle for more even texture.\n咱们这款空气炸锅用的是360°热风循环技术，加热速度比普通款快20%左右~像您说的炸鸡翅，要是冷冻鸡翅，提前解冻后设置180℃，大概20-25分钟就能做好；新鲜鸡翅的话15-20分钟就够，中途翻面一次口感会更均匀。"
      },
      {
        "role": "用户",
        "text": "How about the capacity? For a family of four, how much food can it fry at once?\n那它容量怎么样？一家人4口人用，一次能炸多少东西呀？"
      },
      {
        "role": "客服",
        "text": "Ours is a 5.5L golden capacity, which is completely sufficient for a family of four~ It can accommodate 8-10 medium-sized chicken wings at once, or one whole 500g roasted chicken. It can also make french fries or egg tarts in one batch without needing to cook in batches.\n咱们这款是5.5L的黄金容量，4口人用完全够的~一次能放8-10个中等大小的鸡翅，或者1整只500g左右的烤鸡，平时做个薯条、蛋挞也能一次满足，不用分批烤。"
      },
      {
        "role": "用户",
        "text": "I'm worried it might be complicated to operate. Will adjusting temperature and time be difficult?\n我怕操作麻烦，它调温度和时间会不会很复杂呀？"
      },
      {
        "role": "客服",
        "text": "Not at all! It has 8 preset menus for common delicacies like french fries, roast chicken, and egg tarts. You can simply press the corresponding button to automatically match temperature and time without manual adjustment; if you want to set it yourself, the temperature (80℃-200℃) and time (1-60 minutes) buttons on the panel are also very clear, easy for elderly people to use.\n完全不会哦！它有8个预设菜单，像薯条、烤鸡、蛋挞这些常见美食，直接按对应按键就能自动匹配温度和时间，不用手动调节；如果想自己设置，面板上的温度（80℃-200℃）和时间（1-60分钟）按钮也很清晰，老人也能轻松上手。"
      },
      {
        "role": "用户",
        "text": "Is it easy to clean? Will there be oil stains that are hard to wipe off after long use?\n那清洗方便吗？用久了会不会有油污不好擦？"
      },
      {
        "role": "客服",
        "text": "Please rest assured about cleaning~ The frying basket and inner wall of the fryer are both food-grade non-stick coated, so after making food, you can clean it with a wet cloth and the oil stains won't easily accumulate; moreover, the frying basket is removable and can be directly rinsed with water without much effort.\n清洗方面您放心~炸篮和炸锅内壁都是食品级不粘涂层，做完食物后用湿抹布一擦就能清洁干净，油污不容易残留；而且炸篮是可拆卸的，直接拿水冲也没问题，不用费劲刷。"
      },
      {"role": "用户", "text": "Alright, I understand now, thank you!\n行，我大概了解了，谢谢呀！"},
      {
        "role": "客服",
        "text": "You're welcome~ If you have any performance or operation questions during subsequent use, feel free to contact me. Wishing you a pleasant usage experience!\n不客气~如果后续使用时还有任何性能或操作问题，随时联系我就好，祝您用得愉快！"
      }
    ]
  },
  {
    "id": 3,
    "title": "客服售后场景",
    "dialogue": [
      {
        "role": "客服",
        "text": "Hello! This is the XX treadmill after-sales service. I'm Xiao Yang. May I ask if you've encountered any malfunction or issue while using the treadmill?\n您好！这里是XX跑步机售后客服，我是小杨，请问您在使用跑步机时遇到什么故障或问题了吗？"
      },
      {
        "role": "用户",
        "text": "My treadmill's running belt has been running off-center since yesterday when I turned it on. The left side is narrow and the right side is wide, and I'm worried I might slip off while running. What should I do?\n我家跑步机昨天开机后，跑带一直在跑偏，左边窄右边宽，跑的时候总担心会滑出去，这咋整啊？"
      },
      {
        "role": "客服",
        "text": "I completely understand your concern! Belt misalignment is a common minor issue. Don't panic, we can try a simple adjustment first—do you see the two black adjustment screws on both sides of the treadmill belt (at the rear of the running platform)?\n特别理解您的顾虑！跑带跑偏是常见小问题，您先别慌，咱们可以先试下简单调试——您看跑步机跑带两侧，是不是各有一个黑色的调节螺丝（在跑台尾部）？"
      },
      {
        "role": "用户",
        "text": "Let me check... Yes, there's a small screw on each side.\n我找一下……对，两边都有个小螺丝。"
      },
      {
        "role": "客服",
        "text": "Please turn off the treadmill power first, then use the hex wrench included with the product to gently turn the right adjustment screw clockwise by 1/4 turn each time. After that, turn on the machine and test run for 30 seconds to see if the belt has realigned. If it's still misaligned, adjust it again, but don't turn too much at once.\n您先把跑步机电源关掉，然后用咱们附赠的六角扳手，轻轻顺时针拧右边的调节螺丝，每次拧1/4圈就好，拧完后开机试跑30秒，看看跑带有没有回正。如果还偏，就再微调，别一次拧太多哦。"
      },
      {
        "role": "用户",
        "text": "I tried adjusting it twice, but it still seems a bit misaligned, and there's also a 'humming' noise when turned on, which wasn't there before.\n我刚才试了拧了两次，好像还是有点偏，而且开机后还有点“嗡嗡”的异响，之前没这声音。"
      },
      {
        "role": "客服",
        "text": "That might be due to belt tension or roller issues requiring inspection. Please provide the treadmill model (on the label on the side of the machine) and purchase date, as well as your address, and I'll arrange for a technician to come for on-site inspection, which would be more appropriate.\n那可能是跑带张力或滚筒需要检查了。麻烦您提供一下跑步机的型号（机身侧面标签上有）和购买时间，还有您家的地址，我安排师傅上门检修会更稳妥。"
      },
      {
        "role": "用户",
        "text": "The model is TR-8800, purchased in January this year. The address is Building 5, Unit 1, Room 1202, Sunshine New City, XX District, XX City.\n型号是TR-8800，今年1月买的，地址是XX市XX区阳光新城5栋1单元1202。"
      },
      {
        "role": "客服",
        "text": "Received! Your treadmill is still within the 1-year warranty period, and inspection and parts replacement for non-human-caused malfunctions are free. I'll arrange for a technician to come tomorrow between 10:00-12:00 AM, and the technician will call you 30 minutes in advance to confirm. Is this time convenient for you?\n收到！您的跑步机还在1年质保期内，非人为故障的检修和配件更换都是免费的。我这边安排师傅明天上午10点-12点上门，师傅出发前会提前半小时给您打电话确认，您看这个时间方便吗？"
      },
      {
        "role": "用户",
        "text": "Convenient! Do I need to prepare anything in advance for the technician's visit?\n方便！那师傅上门需要我提前准备什么不？"
      },
      {
        "role": "客服",
        "text": "You only need to clear the area around the treadmill to provide space for inspection. The technician will bring all tools. Also, please refrain from using the treadmill temporarily to avoid worsening the malfunction.\n您只用把跑步机周围的杂物清一下，给师傅留出检修空间就行，工具师傅都会带。另外麻烦您暂时别再使用跑步机，避免故障加重~"
      },
      {
        "role": "用户",
        "text": "Great, thank you so much, now I don't have to worry anymore!\n好的，太感谢了，终于不用愁了！"
      },
      {
        "role": "客服",
        "text": "You're welcome! If you have any further questions, feel free to contact me anytime. Wishing you a pleasant life!\n不客气！后续有任何问题您随时联系我，祝您生活愉快！"
      }
    ]
  },
  {
    "id": 4,
    "title": "退换货",
    "dialogue": [
      {
        "role": "客服",
        "text": "Hello! This is the XX home appliance customer service center. I'm Xiao Su. May I ask if you want to consult about the juicer's return or exchange policy?\n您好！这里是XX家电客服中心，我是小苏，请问您是想咨询榨汁机的退换货相关问题吗？"
      },
      {
        "role": "用户",
        "text": "Yes, I bought this juicer 3 days ago. When I used it for the first time yesterday, there was a problem—the motor would run for two seconds and then stop, unable to crush the fruit. I want to return it.\n对，我3天前买的这款榨汁机，昨天第一次用就出问题了——按启动键后电机转两下就停，水果也榨不碎，想退了。"
      },
      {
        "role": "客服",
        "text": "I'm very sorry for the unpleasant experience! Don't worry, let's first confirm the situation: Has the juicer been dropped or exposed to water, or did you put too much ingredients during operation? Also, please provide the order number so I can verify the product information and purchase date.\n非常抱歉给您带来不好的体验！您先别着急，咱们先确认下情况：榨汁机有没有摔过、进水，或者操作时有没有放太多食材呀？另外麻烦您提供下订单号，我先核对商品信息和购买时间。"
      },
      {
        "role": "用户",
        "text": "Definitely not dropped or exposed to water, and I followed the instructions for the amount of apple and milk. The quantity was not excessive at all. The order number is 567890123, and the phone number is 137XXXX4567.\n肯定没摔过也没进水，就按说明书放的苹果和牛奶，量一点都不多。订单号是567890123，手机号137XXXX4567。"
      },
      {
        "role": "客服",
        "text": "I've found your order! The product was received 3 days ago, which is still within the 7-day no-reason return period, and it's a performance fault, meeting the conditions for free return or exchange. Could you please take photos of the juicer's body label (with model) and a video of the fault status and send them to our customer service official account? This will help the warehouse verify the fault situation later.\n已查到您的订单！商品是3天前签收的，还在7天无理由退换期内，且属于性能故障，符合免费退换条件。您方便拍下榨汁机的机身标签（带型号）、故障时的状态视频，发给咱们客服公众号吗？"
      },
      {
        "role": "用户",
        "text": "Sure, I'll take the photos later. What's the return address? Who covers the shipping cost for returning it?\n可以，我等下就拍。那退货地址在哪？寄回去的运费谁出呀？"
      },
      {
        "role": "客服",
        "text": "The return address is: Building B, 3rd Floor, Home Appliance After-sales Industrial Park, XX District, XX City. Recipient: After-sales Department, Phone: 189XXXX8765. The shipping cost is covered by us. After you send it back, please send the tracking number to me. Once the warehouse receives the item and confirms the fault through inspection, the refund will be processed to your payment account within 24 hours.\n退货地址是XX市XX区家电售后产业园B栋301，收件人：售后部，电话：189XXXX8765。运费由咱们承担，您寄回后把快递单号发给我，仓库收到货并检测确认故障后，会在24小时内把货款原路退回您的支付账户。"
      },
      {
        "role": "用户",
        "text": "What if the warehouse says there's no fault? I确实 can't use it.\n那如果仓库说没故障咋办？我确实是用不了啊。"
      },
      {
        "role": "客服",
        "text": "Please rest assured, our warehouse follows standard inspection procedures. If no fault is detected, we will contact you immediately to share the inspection video and teach you the correct operation; if a fault is confirmed, we will arrange a refund immediately. The whole process will be communicated with you to avoid any inconvenience.\n您放心，咱们仓库会按标准流程检测，若检测出无故障，会第一时间联系您同步检测视频，并教您正确操作；若确认有故障，会立刻安排退款，整个过程都会和您保持沟通，不会让您受困扰。"
      },
      {"role": "用户", "text": "Alright, I'll take the video and send it. Thank you!\n行，那我先拍视频发过去，谢谢啊！"},
      {
        "role": "客服",
        "text": "You're welcome! If you have any further questions, feel free to contact me anytime. We apologize for the inconvenience caused.\n不客气！后续有任何问题，您随时找我就行，给您带来的不便还请谅解~"
      }
    ]
  },
  {
    "id": 5,
    "title": "空气炸锅质量与颜色咨询",
    "dialogue": [
      {
        "role": "客服",
        "text": "Hello! Welcome to XX Home Appliance Flagship Store. I'm customer service Xiao Xia. May I ask which aspects of our air fryer you'd like to learn about?\n您好！欢迎来到XX家电旗舰店，我是客服小夏，请问您想了解咱们家空气炸锅的哪些方面呀？"
      },
      {
        "role": "用户",
        "text": "I want to ask first, is the quality of your air fryer reliable? Will it break down after a few months of use?\n我想先问问，你们这空气炸锅质量靠谱不？会不会用几个月就坏了呀？"
      },
      {
        "role": "客服",
        "text": "You can be completely assured! The core components of our air fryer (motor, heating element) have undergone 3000 hours of aging tests, with durability 30% higher than the industry average standard. We also provide a 2-year warranty—free replacement for non-human-caused faults in the first year, and free repair in the second year. If any quality issues arise during subsequent use, you can contact us anytime for resolution. Many regular customers have reported using theirs for over 3 years with performance like new.\n您完全可以放心！咱们这款空气炸锅的核心部件（电机、加热管）都是经过3000小时老化测试的，耐用性比行业平均标准高30%，而且整机提供2年质保——前1年非人为故障免费换新，第2年免费维修，后续使用中如果出现质量问题，随时联系我们就能处理。很多老顾客反馈用了3年多，性能还和新的一样呢。"
      },
      {
        "role": "用户",
        "text": "That's quite reassuring. By the way, what colors does it come in? My kitchen is light gray, and I want to choose a matching color.\n那还挺让人放心的。对了，它有几种颜色呀？我家厨房是浅灰色的，想选个搭的颜色。"
      },
      {
        "role": "客服",
        "text": "Currently, this air fryer comes in 3 main colors, perfect for matching different kitchen styles:\n- Classic Black: Stain-resistant and versatile, easily integrating with light gray, white, or dark kitchens;\n- Cream White: Very attractive, with a fresh feel that looks clean when paired with your light gray kitchen;\n- Light Mist Blue: Unique yet gentle, suitable for those who like bright colors without being too flashy, creating a beautiful contrast with light gray.\nYou can click on the \"Color Options\" in the product details page, where there are photos showing the actual colors for a more intuitive view.\n目前这款空气炸锅有3种主流颜色，特别适合搭配不同风格的厨房：\n- 经典黑：耐脏又百搭，不管是浅灰、白色还是深色厨房，都能轻松融入；\n- 奶白色：颜值很高，自带清新感，和您家浅灰色厨房搭配会很显干净；\n- 浅雾蓝：小众又温柔，适合喜欢亮色但不想太张扬的风格，和浅灰搭配也能撞出好看的效果。\n您可以点击商品详情页的\"颜色选项\"，里面有实物图，能更直观看到颜色效果~"
      },
      {
        "role": "用户",
        "text": "Will the cream white color get dirty easily? Is it troublesome to clean?\n那奶白色会不会容易脏啊？擦起来麻烦不？"
      },
      {
        "role": "客服",
        "text": "The cream white model uses stain-resistant and wear-resistant food-grade housing. When oil splatters occur, you can easily clean it with a wet cloth and a little dish soap without leaving marks; moreover, the housing surface has an anti-scratch coating, so occasional bumps won't easily cause scratches, making daily cleaning very convenient.\n奶白色款用的是抗污耐磨的食品级外壳，平时溅到油污，用湿抹布蘸点洗洁精轻轻一擦就能干净，不容易留印子；而且外壳表面有防刮涂层，偶尔碰到也不容易有划痕，日常清洁很方便。"
      },
      {
        "role": "用户",
        "text": "Alright, I understand now. I'm planning to choose cream white. Thank you!\n行，那我大概知道了，打算选奶白色的，谢谢呀！"
      },
      {
        "role": "客服",
        "text": "You're welcome~ If you have any questions about color verification or quality issues after placing your order, feel free to contact me anytime. Wishing you a pleasant shopping experience!\n不客气~如果后续下单后有任何关于颜色核对或质量问题，随时找我就行，祝您购物愉快！"
      }
    ]
  },
  {
    "id": 6,
    "title": "跑步机价格与竞品对比咨询",
    "dialogue": [
      {
        "role": "客服",
        "text": "Hello! This is XX Sports Equipment Flagship Store. I'm customer service Xiao Yu. May I ask if there's anything about the treadmill you'd like to confirm further?\n您好！这里是XX运动器材旗舰店，我是客服小宇，请问您在了解跑步机时，有什么想进一步确认的吗？"
      },
      {
        "role": "用户",
        "text": "I see this treadmill costs over 3000 yuan, while the same configuration model at the store next door is only over 2000 yuan. I feel yours is too expensive, and they even give away yoga mats and heart rate bands, making their cost-effectiveness seemingly higher.\n我看你们这款跑步机要3000多，隔壁店同款配置的才2000出头，感觉你们家太贵了，而且人家还送瑜伽垫和心率带，性价比好像更高。"
      },
      {
        "role": "客服",
        "text": "I completely understand your concern about price and cost-effectiveness! Actually, there are several key differences in core configurations between our treadmill and the 2000-yuan model you mentioned. Let me explain: Our motor is a 1.5HP quiet copper-core motor with operating noise below 55 decibels, so it won't disturb family members when running at night. Most 2000-yuan models use aluminum-core motors, which are not only noisy but also prone to overheating with long-term use; additionally, our running belt is 52cm wide, providing more stability suitable for people of different heights, while most competing models in the same price range have belts of only 45-48cm, resulting in poorer safety and comfort.\n特别理解您对价格和性价比的关注！其实咱们家跑步机和您说的2000出头的款式，核心配置有几个关键区别，您可以了解下：咱们的电机是1.5HP静音铜芯电机，持续运行时噪音低于55分贝，晚上跑步也不会吵到家人，而多数2000元左右的机型用的是铝芯电机，不仅噪音大，长期使用还容易过热；另外咱们跑带宽度是52cm，跑起来更稳，适合不同身高的人，竞品同价位跑带大多只有45-48cm，安全性和舒适度会差一些。"
      },
      {
        "role": "用户",
        "text": "Besides configuration, are there other guarantees that justify the price difference?\n那价格差这么多，除了配置，还有别的保障吗？"
      },
      {
        "role": "客服",
        "text": "Yes! We provide a 3-year warranty for the entire machine, with the motor separately warranted for 5 years. Subsequent parts failures or repairs won't incur additional costs; most competing models in the same price range only offer 1-year warranty with 2-year motor warranty, resulting in higher long-term after-sales costs. Additionally, although we don't give away yoga mats, we include professional running belt lubricant and cleaning kits, which are essential for daily treadmill maintenance and would cost over 100 yuan if purchased separately, making them more practical.\n有的！咱们整机提供3年质保，其中电机单独保5年，后续不管是零件故障还是维修，都不用额外花钱；而多数竞品同价位机型只保1年，电机也只保2年，长期使用的售后成本会更高。另外咱们虽然没送瑜伽垫，但会附赠专业的跑带润滑油和清洁套装，这些都是跑步机日常维护必须用的，外面单独买也要100多块，实用性会更强。"
      },
      {
        "role": "用户",
        "text": "Do you have any current promotions? If it could be cheaper, I could accept it.\n那你们现在有优惠吗？要是能便宜点，我还能接受。"
      },
      {
        "role": "客服",
        "text": "We currently have a limited-time promotion where you can enjoy a 300-yuan instant discount, making the actual price 2799 yuan. You can also pay in 6 interest-free installments, with each payment only about 460 yuan, reducing financial pressure. Moreover, we support 7-day no-reason trial. After receiving the goods, you can actually run on it for a few days, and if you feel it doesn't meet expectations, as long as it doesn't affect secondary sales, you can return it anytime, and we'll cover the shipping costs both ways. You can feel assured to experience it.\n目前咱们有个限时活动，今天下单能享受300元立减，实际到手2799元，还能分6期免息，每期只要460多，压力也小。而且咱们支持7天无理由试用，您收到货后可以实际跑几天，要是觉得不如预期，只要不影响二次销售，随时能退，来回运费我们承担，您可以放心体验。"
      },
      {
        "role": "用户",
        "text": "Alright, I'll compare the configurations further. If it's suitable, I'll place an order today.\n行，那我再对比下配置，要是合适就今天下单。"
      },
      {
        "role": "客服",
        "text": "No problem! If you have any other configuration details you want to understand, feel free to ask me anytime. Wishing you a satisfactory treadmill purchase!\n没问题！您要是还有其他配置细节想了解，随时问我就行，祝您选到满意的跑步机~"
      }
    ]
  }
]

const negative_comments = [
  {
    "item_type": "质量问题",
    "item_desc": "这个空气炸锅有问题，无法正常加热",
    "solution": "致歉,提供退货换货服务、承担退货运费、退款",
    "solution_template": "真的很抱歉呢亲，咱们仓库的同事打包时没有注意到这个问题。您这边退回，运费您先垫付，把运费的截图发给我们，我们这边收到产品就会给您退款的。真心给您添麻烦了!"
  },
  {
    "item_type": "对比竞品问题",
    "item_desc": "别家的跑步机比你们便宜，服务更好",
    "solution": "强调差异化价值，推荐更有性价比的产品。",
    "solution_template": "尊敬的顾客，我们更注重售后服务，如24小时响应，终身维护，您购买的不仅是产品，还有长期保障。如果您看重价格，我们近期有类似功能的促销款，性价比很高，我为您详细介绍下?"
  },
  {
    "item_type": "商品破损",
    "item_desc": "你好，刚收到你们的空气炸锅，拆开快递就发现炸锅顶部的透明窗裂了一道挺长的缝，边缘还有点变形，应该是运输过程中磕碰了，现在没法使用。",
    "solution": "致歉，核实情况，优先提供换新服务，承担退货运费退款",
    "solution_template": "尊敬的用户，收到图片了，确实是明显的运输破损，非常抱歉给您带来不便。针对您反馈的受损问题，我们提供换货服务，换新全程不需要您承担任何运费，后续寄出新品后会给您发送物流单号，您注意查收就行~ 再次为这次的破损问题跟您说声抱歉，感谢您的理解！"
  },
  {
    "item_type": "退换货问题",
    "item_desc": "您好，3天前买的迷你榨汁机，拆开试了一次，觉得容量比预期小，想无理由退货，请问怎么操作呀？",
    "solution": "核实情况，提供七天无理由退货，高效的提供指引",
    "solution_template": "您好！只要商品保持完好（机身无划痕、配件齐全、原包装未破损），支持7天无理由退货~ 您可以先在订单页面申请“无理由退货”，选择退货原因“尺寸/容量不符”，提交后会有物流专员联系您上门取件，退货运费需要您先垫付，我们收到商品验收无误后，会在1-3个工作日内将运费和货款一起退给您哦~"
  },
  {
    "item_type": "快递丢失问题",
    "item_desc": "我七天前在你们这买的划船机，显示早就派送了，但我一直没收到，物流信息还显示已签收，这怎么回事？",
    "solution": "快速核实，主动对接快递，明确覆约时间，补偿安抚。",
    "solution_template": "实在不好意思给您带来困扰！跟快递员沟通后了解到，因为当天快递量较大，他误将您的包裹放到了附近代收点，忘记给您发送取件码。现在已经跟代收点确认，您的电饭煲还在那，我让快递员马上给您送过去，预计1小时内就能送达，然后我们补偿您一张10块钱的优惠券，您看这样可以吗？"
  },
  {
    "item_type": "责任推诿型问题",
    "item_desc": "APP操作太复杂了！老人根本看不懂，想设置个定时温度，琢磨半小时都弄不好。",
    "solution": "避免直接指责，提供补救措施",
    "solution_template": "可能是系统提示不够清晰导致误解，我来教您如何正确操作:在APP“设置”中开启“老人模式”（部分机型有简化界面，仅保留“升温”“降温”“定时”核心功能）；通过APP生成“操作指南图文”（含步骤截图），打印出来贴在恒温器旁；联系客服获取1对1远程指导，或让售后发送简易操作视频，帮助老人快速上手。\"为了减少您的损失，我们可以协助帮您重新设置。"
  }
];

import { nextTick, watch} from 'vue'

// 添加对话框容器引用
const dialogContainer = ref(null)

// 自动滚动到底部的函数
const scrollToBottom = () => {
  nextTick(() => {
    if (dialogContainer.value) {
      dialogContainer.value.scrollTop = dialogContainer.value.scrollHeight
    }
  })
}

// 监听选中对话的变化
watch(selected_dialog, () => {
  scrollToBottom()
})

// 监听对话内容变化
watch(() => service_dialog[selected_dialog.value]?.dialogue, () => {
  scrollToBottom()
}, {deep: true})

// 组件挂载后也执行一次滚动
import {onMounted} from 'vue'

onMounted(() => {
  scrollToBottom()
})


</script>

<style>

body {
  font-family: 'Noto Sans SC', sans-serif;
}
</style>